<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax发表评论</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            color: #444;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        body {
            padding: 50px;
            background: #FCFCFC;
        }

        li {
            list-style: none;
            padding: 10px;
            margin-bottom: 5px;
            background: #FFF5EE;
            overflow: hidden;
        }

        #comment {
            text-indent: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 10px;
        }

        #comment-ch {
            background: #f0f0f0;
            padding: 5px;
            border-radius: 10px;
            color: blue;
            font-size: 12px;
        }

        #form {
            display: none;
            overflow: hidden;
        }

        #name {
            width: 200px;
            height: 30px;
            margin-bottom: 10px;
            font-size: 16px;
            padding: 3px;
        }

        .con-label {
            line-height: 3;
        }

        .content {
            width: 100%;
            height: 200px;
            padding: 5px;
            font-size: 16px;
        }

        input[type=button] {
            padding: 6px 20px;
            background: #f0f0f0;
            border-radius: 20px;
            border: 0;
            cursor: pointer;
        }

        input[type=button]:focus {
            outline: 0;
        }

        .sent {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .form1 {
            padding-bottom: 30px;
        }

        .report {
            position: absolute;
            top: -25px;
            right: 20px;
        }

        form {
            position: relative;
            padding: 20px;
        }

         li span.lt {
            float: left;
        }

       li span.rt {
            float: right;
        }
    </style>
</head>
<body>
<h3>发表说说：</h3>
<form class="form1">
    <textarea name="" class="content con1" placeholder="说点什么..."></textarea>
    <input type="button" class="report" value="发表"/>
</form>
<ul class="text-list">
</ul>
<div id="comment">
    <a href="javascript:;" id="comment-ch">我要评论</a>
</div>
<form id="form">
    <label>昵称：</label>
    <input type="text" id="name" autofocus autocomplete="off" required/>
    <span class="tex1"></span>
    <br/>
    <label class="con-label">内容：</label>
    <textarea class="content" id="content" required autocomplete="off"></textarea>
    <span class="tex2"></span>
    <input type="button" value="发送" class="sent"/>
</form>

<ul id="list">
</ul>
<script src="script/jquery-1.11.1.min.js"></script>
<script>
    $(function () {
        $('#comment-ch').on('click', function () {
            if ($("#form").css('display') == 'none') {
                $("#form").slideDown('fast');
                $('#list').show();
                var timestamp = new Date().getTime();
                $.ajax({
                    type: 'get',
                    url: 'http://moonsweet.net/api.php',
                    data: {article_id: '1', time: timestamp},
                    dataType: 'json'
                })
                        .done(function (msg) {
                            if (msg.status == 'succ') {
                                for (var i = 0; i < msg.data.length; i++) {
                                    var li = $('<li>').appendTo('#list');
                                    $('<span>').addClass('lt').text(msg.data[i].name + ' : '+msg.data[i].content).appendTo(li);
                                    $('<span>').addClass('rt').text('——' + msg.data[i].created).appendTo(li);
                                }
                            }
                        })

            } else {
                $("#form").hide();
                $('#list').html('');
            }
        });
        $('.sent').on('click', function () {
            var vl = $('#name').val();
            var con = $('#content').val();
            if (vl == '') {
                $('.tex1').text("(此处不能为空)").css('color', "red");
                return;
            } else {
                $('.tex1').text('');
            }
            if (con == '') {
                $('.tex2').text("(此处不能为空)").css('color', "red");
                return;
            } else {
                $('.tex2').text('');
            }
            $.ajax({
                type: 'post',
                url: 'http://moonsweet.net/api.php',
                data: {article_id: 1, name: vl, content: con},
                dataType: 'json'
            }).done(function (msg) {
                if (msg.status == 'succ') {
                    var nowli = $('<li>').prependTo('#list');
                    $('<span>').addClass('lt').text(msg.data.name + ' : '+msg.data.content).appendTo(nowli);
                    $('<span>').addClass('rt').text('——' + msg.data.created).appendTo(nowli);
                    $('#name').val('');
                    $('#content').val('');
                }
            })
        });

        $.ajax({
            type: 'get',
            url: 'http://moonsweet.net/article.php',
            dataType: 'json'
        }).done(function (msg) {
            if (msg.status == 'succ') {
                for (i = 0; i < msg.data.length; i++) {
                    var li = $('<li>').prependTo('.text-list');
                    $('<span>').addClass('lt').text(msg.data[i].content).appendTo(li);
                    $('<span>').addClass('rt').text(msg.data[i].created).appendTo(li);
                }
            }
        });
        $('.report').on('click', function () {
            var con1txt = $('.con1').val();
            if (con1txt == '' || con1txt.match(/^\s*$/g)) {
                return;
            }
            $.ajax({
                type: 'post',
                url: 'http://moonsweet.net/article.php',
                data: {content: con1txt},
                dataType: 'json'
            })
                    .done(function (msg) {
                        if (msg.status == "succ") {
                            var li = $('<li>').prependTo('.text-list');
                            $('<span>').addClass('lt').text(msg.data.content).appendTo(li);
                            $('<span>').addClass('rt').text(msg.data.created).appendTo(li);
                        }
                    })


        })


    })
</script>
</body>
</html>